<template>
  <div class="container">
    <div class="containerLeft">
      <div class="videoPlayer">
        <videoPlayer></videoPlayer>
      </div>
      <!-- 底部展示 -->
      <div class="videoPlayerBottom">
        <!-- 视频大标题 -->
        <h1 class="videoMainTitle">{{ nowVideo.videoTitle }}</h1>
        <el-divider content-position="left" class="divider_el">简介</el-divider>
        <!-- 简介内容 -->
        <div class="videoMainIntro">
          <span v-html="nowVideo.videoIntro"></span>
        </div>
      </div>
    </div>

    <!-- 右侧列表 -->
    <div class="containerRight">
      <el-scrollbar height="100%">
        <!-- 视频列表遍历 -->
        <template v-for="video in videoListData" :key="video.videoId">
          <!-- 列表卡片 -->
          <div class="videoListCard">
            <img
              :src="video.videoPoster"
              class="videoImg"
              @click="onPlayVideo(video.videoId)"
            />
            <!-- 卡牌描述文本 -->
            <div class="videoText">
              <span class="videoTitle"> {{ video.videoTitle }}</span>
              <span class="videoIntro" v-html="video.videoIntro"></span>
            </div>
          </div>
        </template>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount, computed, reactive } from "vue";
import videoPlayer from "../../components/videoPlayer.vue";
import useVideoStore from "../../stores/useVideoStore.js";
import useUserStore from "../../stores/useUserStore.js";
import videoHttp from "../../api/videoHttp.js";
const useStore = useUserStore();
const videoStore = useVideoStore();

//数据列表
const videoListData = ref([]);

//正在播放歌曲的信息
const nowVideo = ref({
 
});

onMounted(() => {
  //1.发送请求获取视频列表数据
  getVideoList();
});

//视频列表初始化
async function getVideoList() {
  //获取全部视频列表
  videoHttp.getVideoListAllData(useStore.userId).then((res) => {
    //把数据放到视频列表
    videoListData.value = res.data;

    //格式化第一首歌
    //获取本地存储中的当前播放视频
    const localStorageVideo = JSON.parse(localStorage.getItem("video"));
    //如果本地存储中没有当前播放的数据，则默认播放获取到的列表的第一首歌曲
    if (localStorageVideo == null) {
      videoStore.nowVideoId = videoListData.value[0].videoId; //第0个视频的id
      videoStore.nowVideoInfo = videoListData.value[0];  //第0个视频的数据
      
      //从本地存储 拿初始化数据
    } else {
      videoStore.nowVideoId = localStorageVideo.nowVideoId;
      videoStore.nowVideoInfo = localStorageVideo.nowVideoInfo;
    }
    //初始化当前页面的数据
    nowVideo.value = videoStore.nowVideoInfo
  });
}

//点击播放视频
function onPlayVideo(videoId) {

  //更改点击后更改主标题和简介 通过遍历获取id 为videoId的视频对象
  nowVideo.value = videoListData.value.find((item) => item.videoId === videoId);
  
  //修改当前播放音乐信息
  videoStore.nowVideoId = videoId;
  videoStore.nowVideoInfo = nowVideo.value;
}
</script>

<style scoped>
/* 全局样式 */
.container {
  display: flex;
  height: calc(100vh - 80px);
}
.containerLeft {
  display: flex;
  width: 70%;
  flex-direction: column;
  margin-right: 10px;
}
.videoPlayer {
  border-radius: 5px;
  margin-bottom: 10px;
  aspect-ratio: 16/9;
  background-color: rgb(232, 216, 159);
}
.videoPlayerBottom {
  height: 100%;
}

/* 视频播放器列表框 */
.containerRight {
  width: 30%;
}

/* 媒体查询 */
@media (max-width: 1150px) {
  .videoPlayerBottom {
    margin-top: 40px;
  }
}

/* 视频下方的标题 */
.videoMainTitle {
  margin-bottom: 25px;
  margin-top: 10px;
  font-family: "华文楷体";
  font-style: italic;
  font-weight: normal;
  font-size: 30px;
  text-shadow: 0px 0px 30px #0b840d;
}

/* 分割线 */
.divider_el {
  font-family: "幼圆";
}

/* 视频主简介 */
.videoMainIntro {
  font-family: "宋体";
  font-size: 20px;
  text-indent: 2rem;
  line-height: 1.4;
  margin-top: 5px;
}

/* 视频播放列表图片 */
.videoImg {
  width: 50%;
  object-fit: cover;
  margin: 0px 10px 20px 10px;
  border-radius: 15px;
}

/* 视频播放列表文本 */
.videoText{
  width: 50%;
  margin: 10px;
  margin-right: 15px;
}
.videoImg:hover {
  cursor: pointer; /*鼠标悬停变手型 */
  transform: scale(1.05); /*放大1.1倍 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(0, 0, 0, 0.1);
}
/* 视频列表标题 */
.videoTitle {
  white-space: wrap;
  font-family: "微软雅黑";
  line-height: 1.5;
  font-size: 19px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
/* 视频列表简介 */
.videoIntro {
  user-select: none;
  margin-top: 10px;
  font-family: "微软雅黑";
  font-style: italic;
  font-weight: lighter;
  font-size: 12px;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

/* 视频列表卡片 */
.videoListCard {
  height: 150px;
  display: flex;
}
</style>